import { Component } from '@angular/core';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { Events } from '@core/services/events/Events';
import { SubjectService } from '@core/services/events/subject.service';
import { ApiService } from '@core/services/http/api.service';
import { getO, missingOrEmpty } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-progress',
  template: `
    <div apes-col [apesMd]="getDivCol()">
      <div class="download-loading">
        <div>
          {{title}}数据{{type}}
          <span *ngIf="percent != 100">中请稍后</span>
          <span *ngIf="percent == 100">已完成</span>
          <apes-spin *ngIf="percent != 100" style="display: inline-block" apesSimple></apes-spin>
        </div>
        <apes-progress
          [apesPercent]='percent'
          apesStatus="active"
        ></apes-progress>
      </div>
    </div>
  `,
  styles: [`
    .download-loading {
      padding: 16px;
    }
  `],
})

export class FormlyFieldProgress extends ApesField {

  id: any;
  percent: any = 0;
  title: any;
  type: string = '下载';

  constructor(
    protected apiService: ApiService,
    protected events: Events,
    protected expressionService: ExpressionService,
    protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  ngAfterViewInit() {
    this.subject.subscribe(this.formState, 'progress_' + this.key, data => {
      this.title = data.title;
      this.percent = data.percent;
      this.type = data.type ? data.type : '下载';
    });
  }

  getDivCol() {
    return this.to.divCol || 24;
  }

}

